<template>
  <div class="q-pa-md">
    <button @click="cershi">233</button>
    <t-edit-table
      tabIndex="2"
      ref="edittable"
      selection="multiple"
      @actions="outBtnClick"
      @rowsChanged="rowsChanged"
      :loading="false"
      :hoverModel="false"
      bordered
      allowSort
      :columns="columns"
      :rows="divrows.vardata.row"
      :showRowNumber="true"
      fillMode="auto"
      fillMarginBottom="100px"
      :enableCmdCol="true"
      row-key="name"
      :topBtnOption="['1','2']"
      :staticItems="[
        {
          label: '保存',
          value: 'save',
          icon: '',
          type: 'default',
        },
      ]"
      :columnMethod="{
        carbs: outFunction,
      }"
      @currentRowClick="currentClickRowData"
      :columnHelpSettings="[
        {
          ID: 'ceshi',
          DisplayField: 'label',
          ValueField: 'value',
        },
      ]"
      @selectionChanged="selectionChanged"
      @dataSourceLoaded="dataSourceLoaded"
      @saveEditData="saveEditData"
    >
    </t-edit-table>
  </div>
  <div class="q-pa-md">
    <q-table
      title="Treats"
      :rows="rows"
      :columns="columns"
      row-key="name"
      binary-state-sort
    >
      <template v-slot:body="props">
        <q-tr :props="props">
          <q-td key="name" :props="props">
            {{ props.row.name }}
            <q-popup-edit
              v-model="props.row.name"
              v-slot="scope"
              fit
              self="top left"
              :cover="false"
              auto-save
            >
              <q-input v-model="scope.value" dense autofocus counter />
            </q-popup-edit>
          </q-td>
          <q-td key="calories" :props="props">
            {{ props.row.calories }}
            <q-popup-edit
              fit
              self="top left"
              :cover="false"
              v-model="props.row.calories"
              title="Update calories"
              buttons
              v-slot="scope"
            >
              <q-input type="number" v-model="scope.value" dense autofocus />
            </q-popup-edit>
          </q-td>
          <q-td key="fat" :props="props">
            <div class="text-pre-wrap">{{ props.row.fat }}</div>
            <q-popup-edit
              v-model="props.row.fat"
              v-slot="scope"
              fit
              self="top left"
              :cover="false"
            >
              <q-input type="textarea" v-model="scope.value" dense autofocus />
            </q-popup-edit>
          </q-td>
          <q-td key="carbs" :props="props">
            {{ props.row.carbs }}
            <q-popup-edit
              v-model="props.row.carbs"
              title="Update carbs"
              buttons
              v-slot="scope"
              fit
              self="top left"
              :="false"
            >
              <q-input
                type="number"
                v-model="scope.value"
                dense
                autofocus
                hint="Use buttons to close"
              />
            </q-popup-edit>
          </q-td>
          <q-td key="protein" :props="props">{{ props.row.protein }}</q-td>
          <q-td key="sodium" :props="props">{{ props.row.sodium }}</q-td>
          <q-td key="calcium" :props="props">{{ props.row.calcium }}</q-td>
          <q-td key="iron" :props="props">{{ props.row.iron }}</q-td>
        </q-tr>
      </template>
    </q-table>
  </div>
</template>

<script>
import { onMounted, ref,reactive } from 'vue';
const columns2 = [
  {
    ID: 'ID',
    dataField: 'ID',
    caption: '主键ID',
    dataType: 'String',
    isShow: true,
    groupIndex: '',
    ExprExt: {},
    linkFormat: '',
    enumDisp: {},
    hintConf: {},
    expanded: true,
    RefSchemaExpr:
      'Schema.DQ.GetCDO_DO_BugDemo01BasicList.Sources.DO_BugDemo01.Columns.ID',
    editableExpr: '',
    editorType: null,
    editorConf: {},
    ValueInfo_caption: {
      ShowValue: '主键ID',
      ReferenceExpr:
        'Schema.DQ.GetCDO_DO_BugDemo01BasicList.Sources.DO_BugDemo01.Columns.ID.Text',
      Type: 0,
    },
    ValueInfo_dataType: {
      ShowValue: 'String',
      ReferenceExpr:
        'Schema.DQ.GetCDO_DO_BugDemo01BasicList.Sources.DO_BugDemo01.Columns.ID.DataType',
      Type: 0,
    },
    alignment: 'center',
  },
  {
    ID: 'Code',
    dataField: 'Code',
    caption: '编号',
    dataType: 'String',
    isShow: true,
    groupIndex: '',
    ExprExt: {},
    linkFormat: '',
    enumDisp: {},
    hintConf: {},
    expanded: true,
    RefSchemaExpr:
      'Schema.DQ.GetCDO_DO_BugDemo01BasicList.Sources.DO_BugDemo01.Columns.Code',
    editableExpr: '',
    editorType: null,
    editorConf: {},
    ValueInfo_caption: {
      ShowValue: '编号',
      ReferenceExpr:
        'Schema.DQ.GetCDO_DO_BugDemo01BasicList.Sources.DO_BugDemo01.Columns.Code.Text',
      Type: 0,
    },
    ValueInfo_dataType: {
      ShowValue: 'String',
      ReferenceExpr:
        'Schema.DQ.GetCDO_DO_BugDemo01BasicList.Sources.DO_BugDemo01.Columns.Code.DataType',
      Type: 0,
    },
  },
  {
    ID: 'Name',
    dataField: 'Name',
    caption: '名称',
    dataType: 'String',
    isShow: true,
    groupIndex: '',
    ExprExt: {},
    linkFormat: '',
    enumDisp: {},
    hintConf: {},
    expanded: true,
    RefSchemaExpr:
      'Schema.DQ.GetCDO_DO_BugDemo01BasicList.Sources.DO_BugDemo01.Columns.Name',
    editableExpr: '',
    editorType: null,
    editorConf: {},
    ValueInfo_caption: {
      ShowValue: '名称',
      ReferenceExpr:
        'Schema.DQ.GetCDO_DO_BugDemo01BasicList.Sources.DO_BugDemo01.Columns.Name.Text',
      Type: 0,
    },
    ValueInfo_dataType: {
      ShowValue: 'String',
      ReferenceExpr:
        'Schema.DQ.GetCDO_DO_BugDemo01BasicList.Sources.DO_BugDemo01.Columns.Name.DataType',
      Type: 0,
    },
  },
  {
    ID: 'Creator',
    dataField: 'Creator',
    caption: '创建人',
    dataType: 'String',
    isShow: true,
    groupIndex: '',
    ExprExt: {},
    linkFormat: '',
    enumDisp: {},
    hintConf: {},
    expanded: true,
    RefSchemaExpr:
      'Schema.DQ.GetCDO_DO_BugDemo01BasicList.Sources.DO_BugDemo01.Columns.Creator',
    editableExpr: '',
    editorType: null,
    editorConf: {},
    ValueInfo_caption: {
      ShowValue: '创建人',
      ReferenceExpr:
        'Schema.DQ.GetCDO_DO_BugDemo01BasicList.Sources.DO_BugDemo01.Columns.Creator.Text',
      Type: 0,
    },
    ValueInfo_dataType: {
      ShowValue: 'String',
      ReferenceExpr:
        'Schema.DQ.GetCDO_DO_BugDemo01BasicList.Sources.DO_BugDemo01.Columns.Creator.DataType',
      Type: 0,
    },
  },
];
const columns = [
  // {
  //   name: 'sortRow',
  //   label: '移动',
  //   editorType: 'btnGroup',
  //   isShow: true,
  //   align: 'center',
  //   width:'50px',
  //   dataSource: [
  //     {
  //       label: '',
  //       value: 'up',
  //       icon: 'icon-t-arrow-up-outlined',
  //       type: 'miniText',
  //       hint: '上移',
  //     },
  //     {
  //       label: '',
  //       value: 'down',
  //       icon: 'icon-t-arrow-down-outlined',
  //       type: 'miniText',
  //       hint: '下移',
  //     },
  //   ],
  // },
  {
    name: 'name',
    isShow: true,
    // required: true,
    label: 'Dessert (100g serving)',
    align: 'left',
    field: row => row.name,
    format: val => `${val}`,
    sortable: true,
    editorType: 'input',
    isRequired: 'true',
    placeholder: "placeholder",
    description: "description",
    width:'50px',
    editableExpr:''
  },
  {
    name: 'calories',
    isShow: true,
    align: 'center',
    label: 'Calories',
    field: 'calories',
    sortable: true,
    // editorType: 'inputNumber',
  },
  {
    name: 'fat',
    isShow: true,
    label: 'Fat (g)',
    field: 'fat',
    sortable: true,
    // style: 'width: 10px',
    // editorType: 'inputNumber',
  },
  {
    name: 'carbs',
    isShow: true,
    label: 'Carbs (g)',
    field: 'carbs',
    editorType: 'select',
    dataType:'date',
    editorConf: {
      editorID: 'ceshi',
    },
  },
  // {
  //   name: 'protein',
  //   isShow: true,
  //   label: 'Protein (g)',
  //   field: 'protein',
  //   editorType: '',
  // },
  // {
  //   name: 'sodium',
  //   isShow: true,
  //   label: 'Sodium (mg)',
  //   field: 'sodium',
  //   editorType: '',
  // },
  // {
  //   name: 'calcium',
  //   isShow: true,
  //   label: 'Calcium (%)',
  //   field: 'calcium',
  //   sortable: true,
  //   sort: (a, b) => parseInt(a, 10) - parseInt(b, 10),
  //   dataType: 'selectHelper',
  // },
  // {
  //   name: 'iron',
  //   isShow: true,
  //   label: 'Iron (%)',
  //   field: 'iron',
  //   sortable: true,
  //   sort: (a, b) => parseInt(a, 10) - parseInt(b, 10),
  // },
  // {
  //   name: 'operation',
  //   isShow: true,
  //   label: '操作',
  //   editorType: 'btnGroup',
  //   dataSource: [
  //     {
  //       label: '保存',
  //       value: 'save',
  //       icon: '',
  //       type: 'miniText',
  //     },
  //   ],
  // },
];
const rows = [{}];
const row = [
  {
    name: 'Frozen YogurtFrozen YogurtFrozen YogurtFrozen YogurtFrozen YogurtFrozen Yogurt',
    calories: 159,
    fat: 6.0,
    carbs: 24,
    protein: 4.0,
    sodium: 87,
    calcium: '14%',
    iron: '1%',
  },
  {
    name: 'Ice cream sandwich',
    calories: 237,
    fat: 9.0,
    carbs: 37,
    protein: 4.3,
    sodium: 129,
    calcium: '8%',
    iron: '1%',
  },
  {
    name: 'Eclair',
    calories: 262,
    fat: 16.0,
    carbs: 23,
    protein: 6.0,
    sodium: 337,
    calcium: '6%',
    iron: '7%',
  },
  {
    name: 'Cupcake',
    calories: 305,
    fat: 3.7,
    carbs: 67,
    protein: 4.3,
    sodium: 413,
    calcium: '3%',
    iron: '8%',
  },
  {
    name: 'Gingerbread',
    calories: 356,
    fat: 16.0,
    carbs: 49,
    protein: 3.9,
    sodium: 327,
    calcium: '7%',
    iron: '16%',
  },
  {
    name: 'Jelly bean',
    calories: 375,
    fat: 0.0,
    carbs: 94,
    protein: 0.0,
    sodium: 50,
    calcium: '0%',
    iron: '0%',
  },
  {
    name: 'Lollipop',
    calories: 392,
    fat: 0.2,
    carbs: 98,
    protein: 0,
    sodium: 38,
    calcium: '0%',
    iron: '2%',
  },
  {
    name: 'Honeycomb',
    calories: 408,
    fat: 3.2,
    carbs: 87,
    protein: 6.5,
    sodium: 562,
    calcium: '0%',
    iron: '45%',
  },
  // {
  //   name: 'Donut',
  //   calories: 452,
  //   fat: 25.0,
  //   carbs: 51,
  //   protein: 4.9,
  //   sodium: 326,
  //   calcium: '2%',
  //   iron: '22%',
  // },
  // {
  //   name: 'KitKat',
  //   calories: 518,
  //   fat: 26.0,
  //   carbs: 65,
  //   protein: 7,
  //   sodium: 54,
  //   calcium: '12%',
  //   iron: '6%',
  // },
];
const inputShow = ref(false);
function tdClick(prop1, prop2, prop3) {
  console.log(prop1, prop2, prop3);
}
export default {
  setup() {
    const edittable = ref();
    const outBtnClick = function (item) {
      console.log(item);
    };
    const rowsChanged = function (item, key) {
      console.log(item, key, 'rowsChanged');
    };
    const outFunction = async function (item) {
      return new Promise((resolve, reject) => {
        // 模拟异步操作，这里直接解析您给定的数组
        const selectedArray = [
          {
            label: '静态数据1',
            value: 1,
          },
          {
            label: '静态数据2',
            value: 2,
          },
        ];
        resolve(selectedArray);
      });
    };
    const divrows = reactive({ vardata: {row:[]} });
    onMounted(() => {
      setTimeout(() => {
        divrows.vardata.row.push(...row);
      }, 1000);
    });
    const divrows2 = [
      {
        ID: 'ceshi',
        Code: 'code',
        Name: 'name',
        Creator: 'create',
      },
    ];
    return {
      edittable,
      columns,
      columns2,
      divrows,
      divrows2,
      inputShow,
      tdClick,
      outBtnClick,
      outFunction,
      rowsChanged,
      currentClickRowData(data) {
        console.log(data)
      },
      selectionChanged: function (item) {
        console.log(item);
      },
      cershi: function () {
        console.log(divrows.vardata)
        console.log(edittable.value.getData())
        console.log(edittable.value.currentClickRowData())
        console.log(edittable.value.colCurrentData.data)
        // edittable.value.addRow(null,2)
        // edittable.value.scrollTo(edittable.value.getData()?.length)
      },
      dataSourceLoaded: function (item) {
        console.log('dataSourceLoaded');
      },
      saveEditData: function (item) {
        console.log(item);
      },
      mockData: {
        columns: [
          { label: '编号', name: 'Code', align: 'left', width: '' },
          { label: '姓名', name: 'Name', align: 'left', width: '' },
          { label: '字段A', name: 'fa', align: 'right', width: '' },
          { label: '字段B', name: 'fb', align: 'center', width: '' },
        ],
        rows: [
          {
            ID: 'ab33e510',
            Code: 'oct_7302046766',
            Name: '穰梓玥',
            fa: '字段A_1',
          },
          {
            ID: 'b16fab36',
            Code: 'oct_0104012126',
            Name: '过梓豪',
            fa: '字段A_2',
          },
          {
            ID: '671a7dd6',
            Code: 'oct_5364512751',
            Name: '承若汐',
            fa: '字段A_3',
          },
          {
            ID: 'a6579d11',
            Code: 'oct_6435777027',
            Name: '忻芳',
            fa: '字段A_4',
          },
          {
            ID: '7c439c68',
            Code: 'oct_6276725567',
            Name: '陀玲',
            fa: '字段A_5',
          },
        ],
      },
    };
  },
};
</script>
